<template>
	<view>

		<!-- <block v-if="current == 0"> -->
		<view>
			<th-titlebar ref="titleBar" :commonTitle="false">
			</th-titlebar>
			<view class="content-view-box">
				<!-- banner 搜素区域 -->
				<view class="search-box" :style="{'top':titleBarHeight+'px','background':rgba}">
					<th-search :disabled="false" @search="search"></th-search>
				</view>

				<view class="banner-view">
					<view class="banner-box">
						<!--TODO 无数据占位处理，接口有数据返回的要加上 key - image -->
						<neo-banner :list="swiperList" :keySource="userType=='qunzhong'?'':''"></neo-banner>
					</view>
				</view>
				<!-- 列表内容区域 -->
				<view class="question-list-box"
					:style="{'min-height':contentHeight+'px','margin-top':userType=='qunzhong'?'-20rpx':'0'}">
					<!--XXX 群众端 -->
					<block v-if="userType=='qunzhong'">
						<view class="list-header-box">
							<image class="logo-image" src="../../static/sub-logo.png"></image>
							<view class="text-box">
								<view class="text1">扫码见代表 建议即时办</view>
								<view class="text2">点击提交问题</view>
							</view>
							<view class="submit-btn" @tap="submitQuestion">去提交</view>
						</view>
					</block>
					<!--XXX 非群众端  -->
					<block v-else>
						<wxn-grid col="2">
							<wxn-grid-item v-for="(item,index) in menuList" :key="index">
								<image class="menu-item" :src="item.src" @tap="menuTap(item)">
								</image>
							</wxn-grid-item>
						</wxn-grid>
					</block>

					<view class="list-content-box">
						<view class="title-text">{{subTitle}}</view>
						<view v-if="myQuestionList.length==0&&spaceContent!=0" :style="{'height':spaceContent+'px'}">
							<th-space @btnTap="submitQuestion" :desc="userType=='qunzhong'?'还没有问题，快去提一条':'还没有任何通知'" :showBtn="userType=='qunzhong'?true:false"></th-space>
						</view>
						<block v-else v-for="(item,index) in myQuestionList" :key="index">
							<view class="line-item" @tap="toProDetail(item)">
								<view class="title-date">
									<view class="title">{{item.title}}</view>
									<view class="date">
										{{item.createTime}}{{'&emsp;'}}{{userType=='qunzhong'?item.toUserName:item.userName}}
									</view>
								</view>
								<view v-if="userType=='qunzhong'" class="status-text">{{item.nodeStatusName}}</view>

							</view>
						</block>


					</view>
				</view>
			</view>
		</view>

		<!-- </block> -->
		<!-- HACK 2023-04-12修改，合并群众端与非群众端首页 start-->
		<!-- <block v-else>
			<view class="info-box" style="background: linear-gradient(93deg, #DF3B37 0%, #C62727 100%);">
				<view class="sub-box">
					<image class="sub-img" :src="$imagePreview(userInfo.imagePath)" mode="aspectFill"></image>
					<view class="sub-info">
						<view class="clamp">{{ userInfo.sysUser ? userInfo.sysUser.userName : '游客' }}</view>
						<view class="sub-node">
							<text class="txt">{{ userInfo.roleNames ? userInfo.roleNames[0] : '群众' }}</text>
						</view>
					</view>
				</view>
			</view> -->

		<!-- <view class="container">
			<u-cell-group class="link-list"> -->
		<!-- <u-cell-item title="基本信息" @click="navTo('/pages/load/info')"><image slot="icon" class="list-icon" src="/static/img/icon_17.png" mode="widthFix"></image></u-cell-item> -->
		<!-- 	<u-cell-item title="小程序码" name="app" @click="navTo('/pages/user/app')">
					<image slot="icon" class="list-icon" src="/static/img/icon_19.png" mode="widthFix"></image>
				</u-cell-item>
				<u-cell-item title="退出登录" @click="loginOut" :borderBottom="false">
					<image slot="icon" class="list-icon" src="/static/img/icon_23.png" mode="widthFix"></image>
				</u-cell-item>
			</u-cell-group>
		</view>
		</block> -->
		<!-- <u-tabbar class="tabbar" v-model="current" :list="tabList" @change="tabChange"></u-tabbar> -->
		<!-- HACK 2023-04-12修改，合并群众端与非群众端首页 end-->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				// 
				title: '寿光数字人大平台',
				contentHeight: 0,
				titleBarHeight: 0,
				spaceContent: 0,   
				swiperList: [
					'../../static/banner.png'
				],
				myQuestionList: [],
				userType: undefined, //当前角色身份 ‘群众’-‘政协用户’
				distance: 0, //页面滚动阈值
				scroDistance: 0, //页面实际滚动距离
				total: 0, //列表数据总量
				pageNo: 1, //分页
				searchContent: '', //搜索框内容
				rgba: 'linear-gradient(93deg, rgba(223, 59, 55,0) 0%, rgba(198,39,39,0) 100%)', //'rgba(223, 59, 55,0)'
				text: '',
				tabList: [{
						iconPath: 'home',
						selectedIconPath: 'home-fill',
						text: '首页',
						title: '寿光数字人大平台',
						customIcon: false
					},
					{
						iconPath: 'account',
						selectedIconPath: 'account-fill',
						text: '我的',
						title: '我的',
						customIcon: false
					}
				],
				current: 0,
				scrollTop: 0,
				tabsCurrent: 0,
				tabsList: [{
						name: '邀您协商',
						count: '0'
					},
					{
						name: '结果公示',
						count: '0'
					}
				],
				Notice: {
					list: [],
					pageNum: 1,
					pageSize: 10,
					readType: '',
					announcements: {
						dataType: '1',
						title: ''
					},
					loaded: false,
					loading: 'loadmore'
				},
				list: [],
				param: {
					title: '',
					nodeStatus: '1'
				},
				loading: 'loadmore',
				menuList: [{
					type: '问题列表',
					src: '../../static/menu2.png' //问题列表
				}], //非群众段-功能菜单、
				subTitle: '我的问题', //列表标题
				clientCode: '',
				roleCodes: '',
				userId: '',
				userName: ''

			};
		},
		onLoad() {


			if (this.userInfo.Authorization == undefined) {
				uni.redirectTo({
					url: "/pages/login/index"
				})
			} else {
				//身份类型-群众
				if (this.userInfo.userId != undefined) {
					this.userType = this.userInfo.roleCodes[0]
					this.subTitle = '我的问题' 
				} else {

					if (this.$sysMenus('perform')) {
						this.menuList.unshift({
							type: '履职管理',
							src: '../../static/menu1.png' //履职管理
						})
					}

					this.userType = 'contray-qunzhong'
					this.subTitle = '通知公告'
					this.clientCode = this.userInfo.sysUser.clientCode;
					this.roleCodes = this.userInfo.roleCodes.join(',');
					this.userId = this.userInfo.sysUser.id;
					this.userName = this.userInfo.sysUser.userName;
					console.log('onload::getBanner')
					this.getBanner()
				}

			}
			// this.loadLogin();
			// this.loadData();
		},
		onShow() {
			if (this.userType == 'qunzhong') {
				this.myList()
			} else if (this.userType == 'contray-qunzhong') {
				this.notice()
			}

		},

		onReady() {
			this.titleBarHeight = this.$refs.titleBar.getHeight()
			this.$getSize(this, '.banner-view').then(result => {
				this.distance = result.height
				//加上额外的20高度是设置了padding20
				this.contentHeight = uni.getSystemInfoSync().windowHeight - this.titleBarHeight -
					result.height +
					(this.userType == 'qunzhong' ? uni.upx2px(20) : 0) - uni.upx2px(15 + 68 + 15) //包含搜索狂区域15+68
				this.spaceContent = this.contentHeight - uni.upx2px(36 + 156 + 80) - 30
			})

		},


		onPullDownRefresh() {
			this.loadData('refresh');
		},
		onShareAppMessage(res) {
			return {
				title: this.title,
				path: '/pages/load/index'
			};
		},
		onShareTimeline(res) {
			return {};
		},
		onReachBottom() {
			console.log('onReachBottom')
			if (this.myQuestionList.length >= this.total)
				return
			if (this.userType == 'qunzhong') {
				this.myList()
			}
		},
		onPageScroll(param) {
			this.scroDistance = param.scrollTop
			let rota = this.scroDistance / this.distance
			// if (rota < 0.7)
			// 	rota = 0
			let color1 = 'rgba(223, 59, 55,' + rota.toFixed(1) + ')'
			let color2 = 'rgba(198,39,39,' + rota.toFixed(1) + ')'
			this.rgba = 'linear-gradient(93deg,' + color1 + ' 0%,' + color2 +
				'  100%)' //'rgba(223, 59, 55,' + rota.toFixed(1) + ')'

		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			/* 履职管理 */
			perform() {
				if (this.$sysMenus('perform_eval_group')) {
					uni.navigateTo({
						url: '/pagesA/duties/index'
					});
				} else {
					uni.navigateTo({
						url: '/pagesA/duties/self'
					});
					return false;
					//判断是否活动组
					if (this.$roleCodes('xiaozuguanliyuan')) {
						let wyhdz = this.userInfo.userInfo.wyhdz;
						if (wyhdz == null || wyhdz == '') {
							wyhdz = this.userInfo.userInfo.remark4;
						}
						uni.navigateTo({
							url: '/pagesA/duties/group?wyhdz=' + wyhdz
						});
					} else {
						uni.navigateTo({
							url: '/pagesA/duties/self'
						});
					}
				}
			},

			//搜索回调
			search(data) {
				this.searchContent = data.data
				this.pageNo = 1
				if (this.userType == 'qunzhong') {
					this.myList()
				}
			},

			// 非群众端-菜单
			menuTap(item) {
				switch (item.type) {
					case '履职管理':
						this.perform()
						break
					case '问题列表':
						uni.navigateTo({
							url: '../../subPackages/pages/submit/problemList'
						})
						break
				}
			},

			//群众端-我的问题
			myList() {
				let data = {
					clientCode: this.$c.clientCode,
					shenfen: 1,
					pageNo: this.pageNo,
					problem: {
						title: this.searchContent,
					}
				}
				this.$request(this.$c.api.myList, data).then(result => {
					this.total = result.data.total
					if (this.pageNo == 1) this.myQuestionList.length = 0
					this.myQuestionList = this.myQuestionList.concat(result.data.records)
					if (this.myQuestionList.length < this.total)
						this.pageNo++

				})
			},
			// 通知公告
			notice() {
				let data = {
					pageNum: this.pageNo,
					pageSize: 10,
					currentUserId: this.userId,
					roleCodes: this.roleCodes,
					clientCode: this.clientCode,
					readType: '',
					announcements: {
						dataType: '1',
						title: this.searchContent
					}
				};
				this.$request('/announcements/myList', data).then((result) => {
					this.total = result.data.total
					if (this.pageNo == 1) this.myQuestionList.length = 0
					this.myQuestionList = this.myQuestionList.concat(result.data.records)
					if (this.myQuestionList.length < this.total)
						this.pageNo++
					// let count = 0;
					// if (type != 'add') {
					// 	uni.stopPullDownRefresh();
					// 	this.Notice.list = [];
					// }

					// this.Notice.loading = this.Notice.pageNum < Math.ceil(res.data.total / this.Notice.pageSize) ?
					// 	'loadmore' : 'nomore';
					// this.Notice.pageNum = this.Notice.pageNum + 1;
					// this.Notice.list = this.Notice.list.concat(res.data.records);
					// this.Notice.loaded = true;
					// if (this.Notice.list.length <= 0) {
					// 	this.Notice.loading = 'nodata';
					// }
				});
			},



			toProDetail(item) {
				uni.navigateTo({
					url: '/subPackages/pages/submit/detail?id=' + item.id
				})
			},
			//提问题
			submitQuestion() {
				uni.navigateTo({
					url: '/subPackages/pages/submit/street'
				})
			},





			loadLogin() {
				if (this.userInfo.userInfoId) {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
				this.clientCode = '370502';
				this.pageNum = 1;
				this.pageSize = 10;
			},
			loadData(type = 'add') {
				this.getBanner();
				this.getBaiduToken();
				// this.loadDict('tip', 'tip');

				this.loadNotice(type);
				// this.loadRemoval(type);
			},
			loadNotice(type = 'add') {
				if (type == 'add') {
					if (this.Notice.loading == 'nomore') {
						return false;
					}
					this.Notice.loading = 'loading';
				} else {
					this.Notice.loading = 'loading';
				}
				if (type != 'add') {
					this.Notice.pageNum = 1;
				}
				let data = {
					pageNum: this.Notice.pageNum,
					pageSize: this.Notice.pageSize,
					currentUserId: this.userId,
					roleCodes: this.roleCodes,
					clientCode: this.clientCode,
					readType: this.Notice.readType,
					announcements: this.Notice.announcements
				};
				this.$request('/announcements/myList', data).then((res) => {
					let count = 0;
					if (type != 'add') {
						uni.stopPullDownRefresh();
						this.Notice.list = [];
					}

					this.Notice.loading = this.Notice.pageNum < Math.ceil(res.data.total / this.Notice.pageSize) ?
						'loadmore' : 'nomore';
					this.Notice.pageNum = this.Notice.pageNum + 1;
					this.Notice.list = this.Notice.list.concat(res.data.records);
					this.Notice.loaded = true;
					if (this.Notice.list.length <= 0) {
						this.Notice.loading = 'nodata';
					}
				});
			},
			getBaiduToken() {
				this.$request('/baidu/ttsToken', {
					clientCode: this.clientCode,
					userId: this.userId
				}).then((res) => {
					uni.setStorageSync('baiduToken', res.data);
				});
			},
			getBanner() {
				let list = uni.getStorageSync('swiperList');
				if (list > 0) {
					this.swiperList = list;
					return false;
				}
				this.$request('/banner/list', {
					clientCode: this.clientCode,
					userId: this.userId,
					banner: {
						enable: '1'
					}
				}).then((res) => {
					if (!res.data) {
						return false;
					}
					if (res.data.records.length > 0) {
						this.swiperList = [];
						res.data.records.forEach((item) => {
							if (item.fileList && item.fileList.length > 0) {
								this.swiperList.push({
									id: item.id,
									title: item.title,
									url: item.externalLink,
									image: this.$imagePreview(item.fileList[0].path)
								});
							}
						});
						uni.setStorageSync('swiperList', this.swiperList);
					}
				});
			},
			swiperClick(index) {
				// this.current = index;
				if (this.swiperList[index].id) {
					uni.navigateTo({
						url: '/pagesA/banner/detail?id=' + this.swiperList[index].id
					});
				}
			},
			tabChange(index) {
				// let url = this.tabList[index].pagePath;
				// this.goTo(url);
				this.current = index;
				this.title = this.tabList[index].title;
				uni.setNavigationBarTitle({
					title: this.title
				});
			},
			tabsChange(index) {
				this.tabsCurrent = index;
			},
			loginOut() {
				this.$store.commit('logout');
				uni.reLaunch({
					url: '/pages/login/index'
				});
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			navTo(url) {
				if (this.userInfo.Authorization) {
					uni.navigateTo({
						url: url
					});
				} else {
					this.$store.commit('logout');
					uni.showModal({
						title: '提示',
						content: '请先登录！',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/index'
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.banner {
		margin-top: -88rpx;
		padding: 0;
		// height: 465rpx;
		min-height: 280rpx;

		.image {
			width: 100%;
		}
	}

	.list-box {
		padding: 0 30rpx;
		background-color: #fff;
	}

	.index-card {
		position: relative;
		margin: -60rpx 30rpx 20rpx;
		padding: 20rpx 0;
		border-radius: 12rpx;
		background-color: #fff;

		.card-ttl {
			margin-bottom: 16rpx;
			padding-left: 20rpx;
			font-size: 16px;
			font-weight: bold;
			color: #444;
			border-left: 10rpx solid #f00;
		}

		.card-box {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 0 10rpx;
			border-top: 1rpx solid #ebebeb;

			.card-item {
				width: 190rpx;
			}
		}

		.card-link {
			overflow: hidden;

			.image {
				margin: 0 auto 22rpx;
				width: 52rpx;
				height: 52rpx;
				object-fit: contain;
			}

			.link-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				min-height: 160rpx;
				font-size: 14px;
				line-height: 1.1;
				text-align: center;
			}
		}
	}

	.index-box {
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
		padding: 20upx 30upx;
		background-color: #fff;

		.link-inner {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 400upx;

			&.w1 {
				width: 268rpx;
			}
		}

		.link-item {
			display: block;
			width: 100%;

			.image {
				width: 100%;
			}
		}
	}

	.pro-row {
		.pro-title {
			margin-bottom: 20rpx;
			font-size: 15px;
			color: #e5231a;
		}
	}

	.h2-row {
		margin: 0;
		padding: 20rpx 30rpx;
		border: 0;
		background-color: #fff;
	}

	.content-view-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(93deg, #DF3B37 0%, #C62727 100%);

		.search-box {
			padding: 15rpx 26rpx 15rpx;
			position: sticky;
			z-index: 99999;
		}



		.banner-view {
			padding: 0rpx 26rpx 20rpx;
			box-sizing: border-box;
			z-index: 1;

			.banner-box {
				margin-top: 22rpx;
				height: 320rpx;
			}
		}



	}

	.question-list-box {
		width: 100%;
		border-radius: 36rpx 36rpx 0rpx 0rpx;
		margin-top: -20rpx;
		background: #FFFFFF;
		z-index: 2;
		padding: 36rpx 30rpx 0;
		box-sizing: border-box;

		.list-header-box {
			width: 100%;
			min-height: 156rpx;
			background: linear-gradient(90deg, #FFEFBB 0%, #FFD5BF 100%);
			box-shadow: 0rpx 8rpx 20rpx 0rpx #FFD6B3;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			padding-right: 24rpx;
			box-sizing: border-box;

			.logo-image {
				width: 136rpx;
				height: 116rpx;

			}

			.text-box {
				flex: 1;
				margin-left: 8rpx;

				.text1 {
					font-size: 34rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #7A1C15;
					line-height: 48rpx;
					text-shadow: 0px 8px 20px #FFD6B3;
				}

				.text2 {
					font-size: 28rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #BC816C;
					line-height: 40rpx;
					text-shadow: 0px 8px 20px #FFD6B3;
				}
			}

			.submit-btn {
				width: 132rpx;
				height: 58rpx;
				background: linear-gradient(90deg, #FF5C01 0%, #FE0000 100%);
				box-shadow: 0rpx 8rpx 20rpx 0rpx #FFD6B3;
				border-radius: 29rpx;
				font-size: 28rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #FFE3B7;
				line-height: 40rpx;
				text-shadow: 0px 8px 20px #FFD6B3;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}

		.list-content-box {
			box-sizing: border-box;

			.title-text {
				height: 80rpx;
				// background: #FFFFFF;
				display: flex;
				align-items: center;
				font-size: 34rpx;
				// font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 48rpx;
				border-bottom: 2rpx solid #F6F7FB;
			}
		}
	}

	.op-bg-view {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		// background: linear-gradient(93deg, #DF3B37 0%, #C62727 100%);
	}

	.tabbar {}

	.menu-item {
		width: 100%;
		height: 164rpx;
		// background-image: url('../../static/menu2.png');
		// background-size: 100% 100%;
	}
</style>